iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

telegram開發筆記系列 第 12

[12] 增加 input 輸入功能

  • 分享至 

  • xImage
  •  

接著 input 輸入的各種功能才可以製作介面互動

所以這邊我們使用套件input

npm i input --save

接著再加上將 class FlowController 流程控制加上一個 mainMenu

flowController.js

const viewPrinter = require("../view/viewPrinter");

class FlowController {
  constructor() {}

  /**
   * @description 確保都拿到同一個實例
   *
   * @static
   * @return {*}
   * @memberof ConsoleItem
   */
  static getInstance() {
    if (!this.instance) {
      this.instance = new this();
    }
    return this.instance;
  }

  /**
   * @description 起始畫面
   *
   * @memberof FlowController
   */
  async start() {
    await viewPrinter.welcome();
    this.mainMenu();
  }

  /**
   * @description 主要選單
   *
   * @memberof FlowController
   */
  async mainMenu() {
    let selectOption = await viewPrinter.mainMenu();
    switch (selectOption) {
      case "登入":
        break;
      case "離開":
        console.log(selectOption);
        break;
      default:
        break;
    }
    this.start();
  }
}

let flowController = FlowController.getInstance();

module.exports = flowController;

一樣 ViewPrinter 加上 mainMenu

viewPrinter.js

const consoleItem = require("../interface/consoleItem");
const input = require("input");

class ViewPrinter {
  
  constructor() {}
  
  /**
   * @description 確保都拿到同一個實例
   *
   * @static
   * @return {*} 
   * @memberof ConsoleItem
   */
  static getInstance() {
    if (!this.instance) {
      this.instance = new this();
    }
    return this.instance;
  }


  /**
   * @description 歡迎你
   *
   * @memberof ViewPrinter
   */
  async welcome() {
    return new Promise((resolve) => {
      let str = [
        "=======================================================",
        "=======================================================",
        "============                               ============",
        "============     Welcome Node Telegram     ============",
        "============                               ============",
        "=======================================================",
        "=======================================================",
      ]
      console.log("\x1b[36m");
      for( let i = 0 ; i < str.length ; i++ ) {
        setTimeout(() => {
          console.log(str[i]);
          if(i === str.length -1) {
            console.log("\x1b[0m");
            resolve();
          };
        }, i * 100);
      } 
    })  
  }


  /**
   * @description 主要畫面選單
   *
   * @memberof ViewPrinter
   */
  async mainMenu() {
    let option = ["登入", "離開"];

    let selectOption = await input.select("你好:", option);

    return selectOption;
  }

}

let viewPrinter = ViewPrinter.getInstance();

module.exports = viewPrinter;

day12


上一篇
[11] 建立進入頁面和流程控制
下一篇
[13] 製作離開功能
系列文
telegram開發筆記18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言